<template>
  <!--  员工离职-->
  <div>
    <div>
      <el-row style="background: white">
        <el-col :span="24"><div class="tbUpDiv"><img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg"><span class="tbUpPost">员工离职
       <span class="tjj-1"><el-button color="#626aef" :dark="isDark">离职申请</el-button></span>







        </span></div></el-col>





      </el-row>

      <el-row>
        <el-col>
          <div class="tbScenDiv">
            <div style="display: flex;width: 900px;flex-direction: row;justify-content: space-between;">






            </div>

          </div>


        </el-col>
      </el-row>






      <el-tabs type="border-card" class="demo-tabs">


          <div class="picture" data-v-309cad06="">

            <div class="typeface" data-v-309cad06="">
              <el-row>
                <el-col>
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="booksId" type="selection" width="60"/>
                    <el-table-column prop="name" label="申请人" width="180" />
                    <el-table-column prop="sex" label="申请人部门" width="180" />
                    <el-table-column prop="address" label="现任岗位" width="180" />
                    <el-table-column prop="where" label="提交日期" width="180" />
                    <el-table-column prop="steta" label="流程ID" width="180" />
                    <el-table-column prop="timet" label="流程状态" width="180" />

                  </el-table>
                </el-col>
              </el-row>
              <el-row justify="center">
                <el-col>
                  <el-pagination
                      v-model:currentPage="pageNo"
                      v-model:page-size="pageSize"
                      :page-sizes="[5,10, 20, 30, 40]"
                      small="small"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                      @size-change="sizeChange"
                      @current-change="currentChange"/>
                </el-col>
              </el-row>
            </div></div>



      </el-tabs>

    </div>
  </div>
</template>

<script  lang="ts" setup>
import {ref,reactive,toRefs} from "vue";

const tableData = [
  {
    name: '张三',
    steta:'32432',
    sex:'采购部',
    where:'2022-10-11',
    address: '项目经理',
    timet:'审批中',
  },
  {
    name: '李四',
    steta:'43244',
    sex:'采购部',
    where:'2022-10-11',
    address: '行政主管',
    timet:'审批通过',
  },
  {
    name: '王五',
    steta:'34214',
    sex:'采购部',
    where:'2022-10-11',
    address: '行政主管',
    timet:'审批中',
  },
  {
    name: '赵六',
    steta:'32432',
    sex:'后勤部',
    where:'2022-10-11',
    address: '后勤主管',
    timet:'审批通过',
  },
  {
    name: '王七',
    steta:'43424',
    sex:'后勤部',
    where:'2022-10-11',
    address: '后勤经理',
    timet:'审批中',
  }
]
const hidddiv=ref(false)
const d = reactive({
  //总记录
  total:1,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
});
const {total,pageNo,pageSize} = toRefs(d);

</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  position: relative;

}
.tbImg{
  margin-left: 30px;
  margin-top: 15px;
}
.tbUpPost{
  position: relative;
  top: -19px;
  left: 20px;
}
.tbScenDiv{
  border-bottom: 1px solid gainsboro;
  /*position: relative;*/
  display: flex;
  justify-content: space-between;
}
.tbScenAdiv{
  /*width: 200px;*/
  /*margin-top: 10px;*/
  /*margin-left: 30px;*/
  font-size: 14px;
}
.tjj{
  position:relative;
  left:40px;
}
.tjj-1{
  margin:0px 10px;
  position: relative;
  left: 860px;
  top: 10px;
}
.tbScenBdiv{
  position: relative;
  left: 80px;
  /*top: -34px;*/
  font-size: 14px;
  /*width: 400px;*/
}
.tbScenCdiv{
  /*position: relative;*/
  /*left: 400px;*/
  /*top: -69px;*/
  font-size: 14px;
  /*width: 400px;*/
}
.tbScenDdiv{
  /*position: relative;*/
  /*left: 660px;*/
  /*top: -98px;*/
  font-size: 14px;
  /*width: 400px;*/

}
.tbScenAipt{
  width: 150px;
  height: 30px;
  border: 1px solid gainsboro;
}
.tbScenBipt{
  /*width: 150px;*/
  /*height: 30px;*/

}
.tbFirstBu{
  height: 35px;
  /*margin-left: 100px;*/
  /*margin-top: -54px;*/
}
.tbhide{
}
</style>